<template>
  <div class="sui-navbar">
    <div class="navbar-inner filter">
      <ul class="sui-nav">
        <li v-for="item in orders" :key="item.code" :class="{active:select.code===item.code}">
          <a @click="changeOrder(item)">
            {{ item.name }}
            <span v-show="select.code===item.code">{{ select.asc ? '⬆' : '⬇' }}</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import {inject, reactive} from "vue";

const orders = [{
  code: 1,
  name: '综合'
}, {
  code: 2,
  name: '价格'
}/*, {
  code: 3,
  name: '新品'
}, {
  code: 4,
  name: '评价'
}, {
  code: 5,
  name: '价格'
}*/]
let select = reactive({code: 1, name: '', asc: true});
let queryParams = inject('queryParams') as any

function changeOrder(order: any) {
  if (select.code === order.code) {
    select.asc = !select.asc;
  } else {
    select.asc = true;
    Object.assign(select, order);
  }
  queryParams.order = `${select.code}:${select.asc ? 'asc' : 'desc'}`
}
</script>
<style scoped lang="less">
.sui-navbar {
  overflow: visible;
  margin-bottom: 0;

  .filter {
    min-height: 40px;
    padding-right: 20px;
    background: #fbfbfb;
    border: 1px solid #e2e2e2;
    padding-left: 0;
    border-radius: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

    .sui-nav {
      position: relative;
      left: 0;
      display: block;
      float: left;
      margin: 0 10px 0 0;

      li {
        float: left;
        line-height: 18px;

        a {
          display: block;
          cursor: pointer;
          padding: 11px 15px;
          color: #777;
          text-decoration: none;
        }

        &.active {
          a {
            background: #e1251b;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
